<template>
	<div>
		<el-input v-model="keyWords" size="mini" prefix-icon="el-icon-search" placeholder="按Enter输入姓名进行查询..." @clear="initWorksList"
		 clearable @keydown.enter.native="initWorksList" style="width: 300px; margin-right: 10px;"></el-input>
		<el-button size="mini" type="primary" @click="initWorksList">搜索</el-button>
		<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
		<el-alert title="成绩榜单" type="success">
		</el-alert>

		<el-table :data="worksList" stripe style="width: 100%">
			<el-table-column prop="worksName" label="作品名称" fixed width="150">
			</el-table-column>
			<el-table-column prop="users.username" label="作者名" width="130">
			</el-table-column>
			<el-table-column prop="averageScore" label="平均得分" width="100">
			</el-table-column>
			<el-table-column prop="competition.cname" label="所属比赛" width="180">
			</el-table-column>

		</el-table>
	</div>
</template>

<script>
	export default {
		name: "ScoreList",
		data() {
			return {
				worksList: [],
				total: 0,
				page: 1,
				size: 10,
				keyWords: "",

			}
		},
		mounted() {
			this.initWorksList();
		},
		methods: {
			initWorksList() {
				this.getRequest("/works/scoreList/?keyWords=" + this.keyWords).then(
					res => {
						if (res) {
							if (!res.data) {
								return	this.$notify({
									title: '提示',
									message: '还没有成绩榜单',
									duration: 0
								});
							}
							this.worksList = res.data;
							this.total = res.total;
						}
					})
			},
		},
	}
</script>

<style>
</style>
